<template>
  <div class="app-container calendar-list-container">
    <!-- filter 条件查询 -->
    <div class="filter-container">
      <el-input clearable @keyup.enter.native="handleFilter" v-model="listQuery.businessName" style="width: 200px;" class="filter-item" placeholder="请输入商户名称" >
      </el-input>
      <el-input clearable @keyup.enter.native="handleFilter" v-model="listQuery.address" style="width: 200px;" class="filter-item" placeholder="请输入详细地址" >
      </el-input>
      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">{{$t('common.Search')}}</el-button>
      <router-link :to="{name:'agent_add'}">
        <el-button type="primary"  v-waves icon="el-icon-circle-plus-outline" class="filter-item" @click="dialog.add = true">{{$t('common.Add')}}</el-button>
      </router-link>
      <el-button class="filter-item" type="primary" v-waves  @click="handleDownload" icon="el-icon-download">{{$t('common.Export')}}</el-button>
    </div>
    <!-- table 表格 -->
    <el-table  :data="list" v-loading="loading.list" element-loading-text="给我一点时间" border fit highlight-current-row
      style="width: 100%">      
      <el-table-column align="center" label="序号" prop='index'/>
      <el-table-column align="center" label="商户id" prop='businessId'/>
      <el-table-column  align="center" label="店铺图片" prop='businessTop'>
        <template slot-scope="scope">
          <img :src="scope.row.businessTop" style="width:80px;height:80px;display:block" alt="">
        </template>
      </el-table-column>
      <el-table-column  align="center" label="商户名称" prop='businessName'/>
      <el-table-column  align="center" label="品类" prop='sortName'/>
      <el-table-column  align="center" label="姓名" prop='userName'/>
      <el-table-column  align="center" label="电话" prop='userPhone'/>
      <el-table-column  align="center" label="地址" prop='address'/>
      <el-table-column  align="center" label="上级负责人" prop='parentName'/>
      <el-table-column  align="center" label="上级负责人电话" prop='parentPhone'/>
      <el-table-column  align="center" label="创建时间" prop='ctime'>
        <template slot-scope="scope">
          {{scope.row.ctime | parseTime}}
        </template>
      </el-table-column>
      <el-table-column align="center"  label="操作"  class-name="small-padding fixed-width">
        <template slot-scope="scope"> 
            <router-link :to="{name:'store_detail', query: {id: scope.row.businessId}}">
              <el-button type="text">详情</el-button>
            </router-link>
            <el-button type="danger" size="mini" @click="delHospital(scope.row)">删除</el-button>       
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination 分页 -->
    <div class="pagination-container">
      <el-pagination 
      background 
      @size-change="handleSizeChange" 
      @current-change="handleCurrentChange" 
      :current-page="listQuery.pageNo" 
      :page-sizes="[10, 20, 30, 40]" 
      :page-size="listQuery.pageSize" 
      layout="total, sizes, prev, pager, next, jumper" 
      :total="total">
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { parseTime } from '@/utils/index' 
import { exportExcel} from '@/api/employee'
import { getBusinessList, delBusiness } from '@/api/agent'
export default {
  name: 'agent_store',
  data() {
    return {
      labelPosition: 'right',
      total: 0,
      list: null,
      loading: {
        list: false
      },
      dialog: {
        add: false
      },
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        businessName:'',
        address: '',      
      }, 
    }
  },
  created() {
    this.getHospitalList()
  },
  methods: {
    //导出
    handleDownload() {
      this.downloadLoading = true
      import('@/vendor/Export2Excel').then(excel => {
        const tHeader = ['序号', '商户id', '店铺图片','	商户名称','品类','姓名', '电话', '地址','	上级负责人','上级负责人电话','创建时间']
        const filterVal = ['index', 'businessId', 'businessTop','businessName','sortName','userName', 'userPhone', 'address','parentName','parentPhone','ctime']
        const data = this.formatJson(filterVal, this.list)
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '商家列表'
        })
        this.downloadLoading = false
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => {
      if (j === 'ctime') {
        return parseTime(v[j])
      }else {
        return v[j]
      }
      }))
    },
    add() {},
    //获取代理列表
    async getHospitalList() {
      this.loading.list = true
      const { data } = await getBusinessList(this.listQuery)
      this.list = data.records.map((item, index) => ({index: index + 1, ...item}))
      this.total = data.total
      this.loading.list = false
    },
    //删除
    async delHospital({businessId}) {
        this.$confirm(`是否删除?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
          }).then(async () => {
            try{
              const { data } = await delBusiness({id: businessId})
                this.$message({
                  type: 'success',
                  message: `删除成功`
                })
                this.getHospitalList()
            } catch(error) {

            }
          })
    },
    handleFilter() {
      this.listQuery.pageNo = 1
      this.getHospitalList()
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getHospitalList()
    },
    handleCurrentChange(val) {
      this.listQuery.pageNo = val
      this.getHospitalList()
    }
  }
}
</script>
